<template>
    <div class="home">
      <h1>欢迎使用待办事项应用</h1>
      <p>这是一个简单的待办事项管理应用，帮助您提高工作效率。</p>
      <div class="features">
        <div class="feature-card">
          <h3>添加任务</h3>
          <p>轻松添加您需要完成的任务</p>
        </div>
        <div class="feature-card">
          <h3>管理任务</h3>
          <p>标记完成或删除不需要的任务</p>
        </div>
        <div class="feature-card">
          <h3>随时查看</h3>
          <p>随时随地查看您的任务列表</p>
        </div>
      </div>
      <router-link to="/todos" class="start-button">开始使用</router-link>
    </div>
  </template>
  
  <script>
  export default {
    name: 'HomePage'
  }
  </script>
  
  <style scoped>
  .home {
    padding: 20px;
  }
  
  h1 {
    color: #42b983;
    margin-bottom: 20px;
  }
  
  .features {
    display: flex;
    justify-content: space-around;
    margin: 40px 0;
  }
  
  .feature-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    width: 28%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
  }
  
  .feature-card:hover {
    transform: translateY(-5px);
  }
  
  .start-button {
    display: inline-block;
    background-color: #42b983;
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s;
  }
  
  .start-button:hover {
    background-color: #369f6e;
  }

  .score-links {
    margin-top: 10px;
  }

  .score-link {
    display: block;
    background-color: #42b983;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    margin: 5px 0;
    text-align: center;
    transition: background-color 0.3s;
  }

  .score-link:hover {
    background-color: #369f6e;
  }
  </style>